<template>
    <div class="mt14">
        <div class="txl-right">
            <div class="flex">
                <el-button type="primary" class="buttonstyle" @click = 'openDialog("addFa")'>新增</el-button>
                <el-button type="primary" class="buttonstyle" @click = 'openDialog("editFa")'>编辑</el-button>
            </div>
            <div>
                <el-table
                        ref="multipleTable"
                        :data="tableData"
                        @select="handleCurrentChange"
                        style="width: 100%">
                    <el-table-column
                            type="selection"
                            width="55">
                    </el-table-column>
                    <el-table-column
                            v-for ="item in tableHead"
                            :prop="item.prop"
                            :label="item.label"
                            :width="item.width">
                    </el-table-column>
                    <el-table-column label ="操作">
                        <template slot-scope="scope">
                            <el-button type="text" size="small" @click = 'editFaRwNode(scope.row)'><img src="../../static/image/编辑_on.png" alt=""></el-button>
                            <el-button type="text" size="small" @click = 'deleteFa(scope.row)'><img src="../../static/image/删除_on.png" alt=""></el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="block">
                    <el-pagination
                            @current-change="changePage"
                            :current-page="pageParam.pageNum"
                            :page-size="pageParam.pageSize"
                            layout="total, prev, pager, next, jumper"
                            :total="pageParam.total">
                    </el-pagination>
                </div>
            </div>
           <faglDialog ref = 'rwglDialog'
                       :showRwglDialog='rwglDialog'
                       :dialogOpType = 'dialogOpType'
                       :FaData = 'FaData'
           ></faglDialog>
        </div>
    </div>
</template>

<script>
    import {baseServe} from "../../request/api"
    import faglDialog from "./faglDialog"
    export default {
        name: "faTable",
        data(){
            return{
                //任务管理新增/编辑弹窗显示
                rwglDialog:false,
                tableHead:
                    [{prop:'czdfamc',label:'方案名称',width:''},
                    {prop:'czdfams',label:'方案描述',width:''},
                    {prop:'gjz',label:'关键字',width:''}, ],
                tableData:[],
                //打开弹窗时的操作类别
                dialogOpType:'',
                //分页参数
                pageParam:{
                    pageNum:1,
                    pageSize:10,
                    total: 30,
                },
                //選中的方案數據
                FaData:{}
            }
        },
        components:{
            faglDialog,
        },
        mounted() {
            this.initData()
        },
        watch:{

        },
        methods:{
            //初始化数据，獲取方案表格數據
            initData(){
                let that = this;
                let params = {
                    pageNum:this.pageParam.pageNum,
                    pageSize:this.pageParam.pageSize,
                }
                const loading = this.$loading({
                    lock: true,
                    text: 'Loading',
                    spinner: 'el-icon-loading',
                    background: 'rgba(0, 0, 0, 0.7)'
                });
                baseServe.getFaTableData(params).then(res =>{
                    if(res.data.success==true){
                        loading.close();
                        that.tableData = res.data.data.list;
                        that.pageParam.total = res.data.data.total
                    }
                }).catch(err=>{
                    loading.close()
                    console.error(err);
                })


            },
            //编辑任务节点
            editFaRwNode(row){
                this.$store.commit('schemeIdMutations',row.czdfaid)
                this.$router.push("/rwCard")
             
            },
            //删除任务
            deleteFa(row){
                let that = this;
                const loading = this.$loading({
                    lock: true,
                    text: 'Loading',
                    spinner: 'el-icon-loading',
                    background: 'rgba(0, 0, 0, 0.7)'
                });
                let param ={schemeId:row.czdfaid}
                baseServe.deleteFa(param).then(res =>{
                    if(res.data.success==true){
                        loading.close();
                        that.initData();
                        that.$message({
                            message: "刪除成功！",
                            type: 'success'
                        });
                    }
                }).catch(err=>{
                    loading.close()
                    console.error(err);
                })
            },
            //打開彈窗
            openDialog(opInfo){
                if(opInfo === 'addFa'){
                    this.dialogOpType = '新增方案'
                }else{
                    if(JSON.stringify(this.FaData) == "{}"){
                        this.$message({
                            message: "請選擇需要編輯的方案！",
                            type: 'warning'
                        });
                        return;
                    }
                    this.dialogOpType = '编辑方案'
                }
                this.rwglDialog = true;
            },
            //勾選方案時的方法
            handleCurrentChange(selection,row){
                //clearSelection：用于多选表格，清空用户的选择
                //此时所有的checkbox处于未勾选，当用户第一次点击的时候，selection为一个数组，里面存放的为当前这一行的数据
                this.$refs.multipleTable.clearSelection();
                //此时selection仍然有值 ，只是勾选状态不显示了。
                if (selection.length === 0) {
                    return;
                }
                //这里将这行的状态又变为了勾选
                this.$refs.multipleTable.toggleRowSelection(row, true);
                //用于多选表格，切换某一行的选中状态，如果使用了第二个参数，则是设置这一行选中与否（selected 为 true 则选中）
                //單選，我們只拿最新勾選的數據
                this.FaData = selection[selection.length-1];
            },
            //分页的方法
            changePage(index){
                this.pageParam.pageNum = index;
                this.initData();
            }
        }
    }
</script>

<style lang="less" >
    .mt14{
        margin-top: 10px;
        .txl-left{
            margin-left: 8px;
            width: 200px;
            position: absolute;
            top:40px;
            height: 100%;
            .box-card{
                height: 100%;
                width: 190px;
                border: 1px #999999 solid;
                .clearfix{
                    font-size: 16px;
                    color: #999999;
                }
                .el-tree-node__content{
                    font-size: 14px;
                    vertical-align: middle;
                    margin: 5px;
                }
                .el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content{
                    background-color: rgba(0,0,0,0.1);
                    border-radius: 5px;
                    color: #0081dc!important;
                }
                .el-card__body{
                    padding: 0;
                }
                .text-item{
                    font-size: 16px;
                    text-align: center;
                    height: 30px;
                    padding-top: 4px;
                    .el-tree-node__content{
                        display: block;
                        text-align: center;
                        height: 30px;
                        align-items: center;
                    }
                    .el-tree-node__expand-icon.is-leaf{
                        display: none;
                    }
                }
            }
            .leftname{
                color: #999999;
                font-weight: 200;
                font-size: 16px;
                margin-top: 20px;
                .tab-title{
                    margin: 20px;
                }
            }

        }
        .txl-right{
            position: absolute;
            width:  100%;
            height: 100%;
            left: 30px;
            top:20px;
            .block{
                .el-pagination__total{
                    color: black;
                }
                .el-pagination button:disabled, .el-pager, .el-pager li, .el-pagination .btn-next, .el-pagination .btn-prev{
                    color: black !important;
                }
                .el-pager{
                    color: black;
                }
            }
            .buttonstyle{
                margin-left: 20px;
                width: 120px;
                height: 40px;
                margin-top: 15px;
                margin-bottom: 15px;
            }
            .el-table__body-wrapper{
                height: 540px;
                overflow-y: auto;
            }
            .el-table__header-wrapper{
                margin-left: 0px !important;
                margin-top: 0px;
            }
            .has-gutter{
                background-color: rgba(0,0,0,0.2);
                color: #000000;
            }
            .el-table__body tr:hover>td{
                background-color: rgba(0,0,0,0.1);
            }
            .el-table{
                color: black !important;
            }

            .el-form-item{
                width: 400px;
            }
            .el-form--inline{
                padding: 0px;

            }
            .el-form-item{
                margin-left: 40px;
                margin-bottom: 0px;
            }
            .el-select{
                width: -webkit-fill-available;
            }
        }
        .bjxzdialog{
            .el-dialog__headerbtn{
                display: none;
            }
            .el-dialog{
                height: 700px;
                width: 1000px;
                border-radius: 6px;
                .el-dialog__header{
                    height: 40px;
                    padding: 0;
                    .el-dialog__title{
                        top: 10px;
                        font-size: 16px;
                        position: absolute;
                        margin-left: 22px;
                    }
                }
                .el-button{
                    border-radius: 4px;
                    height: 30px;
                    width: 120px;
                    align-items: center;
                    line-height: 3px;
                    margin-left: 50px;
                }
                .el-button--default{
                    border: 1px #0081dc solid;
                    color: #0081dc;
                }
                .el-input__inner{
                    height: 36px;
                    width: 440px;
                }
                .el-form-item{
                    width: 440px;
                    margin-left: 30px;
                }
                .el-select-dropdown__list{
                    width: 440px;
                }
                .el-form-item__error{
                    margin-left: 180px;
                }
                .el-form{
                    padding-top: 20px;
                }
                .el-form-item__label{
                    line-height: 24px;
                    font-size: 14px;
                }
            }
            .el-dialog__body{
                background: #f0f0f0;
                width: 980px;
                margin-left: 10px;
                height: 500px;
                padding: 0;
            }
            .el-dialog__footer{
                background: #f0f0f0;
                width: 980px;
                margin-left: 10px;
                padding-top: 100px;
                padding-bottom: 20px;
            }
        }
        .deletequeren{
            .el-dialog{
                height: 250px;
                width: 500px !important;
                border-radius: 6px;
                .el-dialog__body{
                    font-size: 16px;
                    text-align: center;
                    width: 480px;
                    margin-left: 10px;
                    padding-top: 40px;
                    padding-bottom: 30px;
                    padding-left: 0;
                    padding-right: 0;
                    background-color: #f0f0f0;
                }
                .el-dialog__footer{
                    background-color: #f0f0f0;
                    width: 480px;
                    margin-left: 10px;
                    padding-top: 20px;
                    padding-bottom: 30px;
                }
                .el-dialog__title{
                    font-size: 17px;
                }
                .el-button--default{
                    border: 1px #0081dc solid;
                    color: #0081dc;
                }
                .el-button{
                    border-radius: 4px;
                    height: 30px;
                    width: 120px;
                    align-items: center;
                    line-height: 3px;
                    margin-left: 40px;
                }
            }
        }
    }
</style>
